﻿<style>
    .list05 ul li{display: inline;float: left;width: 25%;height: 200px;text-align: center;}
    .list05 ul li table tr td{padding: 3px;border: 1px solid #ccc;margin-bottom: 8px; /*background:#ffffff*/}
    .list05 ul li p{text-align: center;margin: 0;padding: 0;}
</style>
<link href="/plug/highslide/highslide.css" rel="stylesheet" type="text/css" />
<script src="/plug/highslide/highslide-with-gallery.js" type="text/javascript"></script>
<script type="text/javascript">
    hs.graphicsDir = '/plug/highslide/graphics/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.fadeInOut = true;
    //hs.dimmingOpacity = 0.75;

    // Add the controlbar
    hs.addSlideshow({
        //slideshowGroup: 'group1',
        interval: 5000,
        repeat: false,
        useControls: true,
        fixedControls: 'fit',
        overlayOptions: {
            opacity: 0.75,
            position: 'bottom center',
            hideOnMouseOut: true
        }
    });
</script>
<div class="list05">
  <ul class="clearfix">
    #foreach($item in $list)
    <li>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" valign="middle" width="${channel.img_width}" height="${channel.img_height}"><a href="${item.img_url}" title="${item.title}" class="highslide" onclick="return hs.expand(this)"> <img src="${item.img_url}" width="${channel.img_width}" height="${channel.img_height}"
                                onload="ImgFix(this,${channel.img_width},${channel.img_height})"
                                border="0" /></a></td>
        </tr>
      </table>
      <p>${item.title}</p>
    </li>
    #end
  </ul>
</div>
